<!--解算服务-->
<template>
  <el-card class="w-[100%]" shadow="never">
    <div style="width: 100%;">
      <el-button :icon="Plus" style="float: right; margin: 10px;" @click="openForm('add')"
      >新增解算服务</el-button
    >
    </div>
   
    <el-table
      :data="tableData.data"
      height="65vh"
      :style="{ width: '100%'}"
      v-loading="tableData.loading"
      :border="true"
      
    >
      <el-table-column prop="id" label="id"  width="50"  align="center"/>
      <el-table-column prop="parseName" label="服务名" width="180"  align="center"/>
      <el-table-column prop="ip" label="ip" width="180" align="center" />
      <el-table-column prop="port" label="端口" width="180"  align="center"/>
      <el-table-column prop="remark" label="备注" width="180" align="center" />
      <el-table-column prop="createdAt" label="创建时间" width="300" align="center" />
      <el-table-column prop="updatedAt" label="更新时间" width="300" align="center" />
      <el-table-column label="操作" align="center" min-width="200">
        <template #default="scope">
          <el-button
            :icon="Edit"
            @click="openForm('edit', scope.row)"
            size="small"
            >编辑</el-button
          >
          <el-popconfirm
            width="220"
            :icon="Delete"
            icon-color="#626AEF"
            title="您确定要删除吗?"
            @confirm="deleteDataForward(scope.row.id)"
          >
            <template #reference>
              <el-button :icon="Delete" type="danger" size="small"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="justify-content: right; margin: 10px;"
      v-model:current-page="tableData.pageNum"
      v-model:page-size="tableData.pageSize"
      background
      layout="total, prev, pager, next, jumper"
      :total="tableData.total"
      @current-change="getTableData"
    />
  </el-card>
  <el-dialog
    v-model="form.loading"
    :title="form.title"
    width="30%"
    draggable
    style="
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    "
  >
    <el-form
      ref="formRef"
      :rules="form.rules"
      :model="form.data"
      label-width="auto"
    >
      <el-form-item label="服务名称" prop="parseName">
        <el-input
          v-model.trim="form.data.parseName"
          placeholder="请输入服务名称"
        />
      </el-form-item>
      <el-form-item label="ip" prop="ip">
        <el-input v-model.trim="form.data.ip" placeholder="请输入ip" />
      </el-form-item>
      <el-form-item label="端口" prop="port">
        <el-input v-model.number="form.data.port" placeholder="请输入端口" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.data.remark"
          :rows="5"
          type="textarea"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <el-button @click="addOrUpdateDataForward" type="primary"
          >确定</el-button
        >
        <el-button @click="form.loading = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage, ElLoading } from "element-plus";
import type {
  DataForm,
  DataForwardParseServer,
  TableData,
} from "@/model/solutionService";
import {
  addDataForwardParseAPI,
  deleteDataForwardParseAPI,
  getDataForwardParsesAPI,
  updateDataForwardParseAPI,
} from "@/api/solutionService";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";

onMounted(() => {
  // 获取表格数据
  getTableData();
});

/**
 * 表格数据
 */
const tableData = ref<TableData>({
  loading: false,
  data: [],
  total: 10,
  pageSize: 10,
  pageNum: 1,
});

/**
 * 获取表格数据
 */
async function getTableData() {
  tableData.value.loading = true;
  const {
    data: { list, total },
  } = await getDataForwardParsesAPI({
    pageNum: tableData.value.pageNum,
    pageSize: tableData.value.pageSize,
  }).finally(() => {
    tableData.value.loading = false;
  });
  tableData.value.data = list ?? [];
  tableData.value.total = total;
}

/**
 * 解算服务表单
 */
const form = ref<DataForm<DataForwardParseServer>>({
  loading: false,
  title: "新增解算服务",
  data: {
    parseName: "",
    ip: "",
    port: NaN,
  },
  rules: {
    parseName: [
      { required: true, message: "请输入解算服务名称", trigger: "blur" },
    ],
    ip: [
      { required: true, message: "请输入解算服务IP", trigger: "blur" },
      {
        pattern:
          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
        message: "IP格式不正确",
        trigger: "blur",
      },
    ],
    port: [
      { required: true, message: "请输入解算服务端口", trigger: "blur" },
      {
        pattern: /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/,
        message: "端口格式不正确",
        trigger: "blur",
      },
    ],
  },
});

/**
 * 新增|编辑解算服务表单组件实例
 */
const formRef = ref();

/**
 * 打开新增|编辑解算服务表单
 */
function openForm(type: "add" | "edit", data?: DataForwardParseServer) {
  // console.log("打开表单", type, data);
  formRef.value && formRef.value.resetFields();
  form.value.loading = true;
  if (type === "add") {
    form.value.title = "新增解算服务";
    form.value.data = {
      parseName: "",
      ip: "",
      port: undefined,
    };
  } else {
    form.value.title = "编辑解算服务";
    form.value.data = { ...data! };
  }
}

/**
 * 新增|编辑解算服务
 */
async function addOrUpdateDataForward() {
  if (!formRef.value) return;
  const valid = await formRef.value.validate().catch(() => {
    ElMessage.warning("请按照要求需求填写表单");
    return false;
  });
  if (!valid) return;
  const { title, data } = form.value;
  const apiFunc =
    title === "新增解算服务"
      ? addDataForwardParseAPI
      : updateDataForwardParseAPI;
  const res = await apiFunc(data).finally(() => {
    form.value.loading = false;
    getTableData();
  });

  if (res.code == 200) {  
    ElMessage.success(title === "新增解算服务" ? "新增成功" : "修改成功"); 
  } else {
    ElMessage.error(res.data);
  }
}

/**
 * 删除
 */
async function deleteDataForward(id: number) {
  try {
    const res = await deleteDataForwardParseAPI(id);
    if (res.code == 200) {  
    ElMessage.success("删除成功"); 
  } else {
    ElMessage.error(res.data);
  }
  } finally {
    getTableData();
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .table {
    height: calc(100% - 50px);
  }
}
</style>
